<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic"%>
<% 
	String keywords = request.getParameter("w");
	if (keywords == null) keywords = "";
%>

<html>
<head>
<title>Simple Book Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" href="css/main.css">
<style>
	.highlight { background-color: yellow; }
	.focusText { border:1px solid #FFFF88;background-color: #EEFFFF; }
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
<script type="text/javascript" src="js/jquery.highlight.js"></script>


<script type="text/javascript">

var cancelBlockUI = false;

$(document).ready(function(){
	
	
	// Popup Item Detail Dialog
	$('.itemImage').live('click', function() {
		getDetail($(this));
	});
	
	$('#myKeywords').focus(function() {
		cancelBlockUI=true;
		$('#myKeywords').addClass("focusText");
	});
	
	$('#myKeywords').blur(function() {
		cancelBlockUI=false;
		$('#myKeywords').removeClass("focusText");
	});
	
	// unblock when ajax activity start 
	$(document).ajaxStart(function(){
		if (!cancelBlockUI) {
			$.blockUI({ message: '<h1> Loading ... </h1>' }); 
		}
	});
	
	// unblock when ajax activity stops 
    $(document).ajaxStop($.unblockUI); 
	
    // Load 10 More Result
	$(".moreItems").live('click', nextResult);
	if($("#currency").val() == ""){
		$("#currency").val("hkd");
	}
	if($("#currency").val() == "hkd"){
		$("#USD").removeClass("largefont");
		$("#HKD").addClass("largefont");
	}else{
		$("#HKD").removeClass("largefont");
		$("#USD").addClass("largefont");
	}
	
	$( "#myKeywords" ).autocomplete({
		source: "AutocompleteBook",
		minLength: 3
	});
	$.ajax({
		  url: "http://www.google.com/ig/calculator?hl=en&q=1HKD=?USD",
		  crossDomain: true,
		  success: function(data){
		  }
		});
	$("#HKD").click(function(){
		if(currency != "hkd"){
			var exchangeRate = $("#exchangeRate").val();
			$(".price").each(function(){
				var value = $(this).text().replace("USD$","" );
				var result = parseFloat(value)/ exchangeRate;

				$(this).text("HKD$"+ result);
			});
		}
		currency = "hkd";
		$("#currency").val(currency);
		$("#USD").removeClass("largefont");
		$("#HKD").addClass("largefont");
	});
	$("#USD").click(function(){
		if(currency != "usd"){
			var exchangeRate = $("#exchangeRate").val();
			$(".price").each(function(){
				var value = $(this).text().replace("HKD$","" );
				var result = parseFloat(value)* exchangeRate;

				$(this).text("USD$"+ result);
			});
		}
		currency = "usd";
		$("#currency").val(currency);
		$("#HKD").removeClass("largefont");
		$("#USD").addClass("largefont");
	});
	$("#btnSearch").click(searchResult);
	$("#btnMore").click(nextResult);
	$("#btnClear").click(clearResult);
	
	$("#myForm").submit(function() { $("#btnSearch").click();return false; });

	function getDetail(obj){
		var asin = obj.attr("asin");
		$.getJSON("GetBookDetailServlet?asin="+asin,function(data){
				if(data.status == "success"){
					var html = "";
					var hkdStr = (((data.amount/100/data.exchangeRate)+""));
					var hkdArr = hkdStr.split(".");
					
					html += "<table>";
					html += "<tr><td colspan='2'>Title : "+data.title+"</td></tr>";
					html += "<tr>";
					html += "<td>";
					html += "<img src='"+obj.attr("largeImage")+"'  height='" + parseInt(obj.attr("h")) + "px' />";
					html += "</td>";
					html += "<td nowrap>";

					var language = "";
					if(data.language != "null"){
						language = data.language;
					}
					html += "Language : "+(language)+"<br/>";
					
					if(data.author != "null"){
						html += "Author : "+(data.author)+"<br/>";
					}
					
					var publisher = "";
					if(data.publisher != "null"){
						publisher = data.publisher;
					}
					html += "Publisher : "+(publisher)+"<br/>";
					
					
					
					if(data.audienceRating != "null"){
						html += "Rating : "+(data.audienceRating)+"<br/>";
					}

					if (data.listPrice != 'null') {
						html += "Price :<br/>";
						html += "USD"+data.listPrice+ " / " + "HKD$"+hkdArr[0]+" <br/>";
					}
					
					html += " <a href='"+data.detailurl+"' target='_blank' >[More Details]</a><br/><br/>";
					
					html += "</td>";
					html += "</tr>";
					html += "<tr>";
					html += "<td>";
					html += "</td>";
					html += "<td>";
					html += "</td>";
					html += "</tr>";
					html += "</table>";

					var displayTitle = "";
					if( data.title.length > 50){
						displayTitle = data.title.substring(0,50) + " ... ";
					}else{
						displayTitle = data.title;
					}
					$("#dialog").html(html);
					
					var dialogHeight = ((parseInt(obj.attr("h"))) + 20) + ($.browser.msie?'px':'');
	                var dialogWidth = ((parseInt(obj.attr("w"))) + 300) + ($.browser.msie?'px':'');
	                $("#dialog").dialog({ modal: true, height: dialogHeight , width: dialogWidth , title:displayTitle });
					
	                
					//$("#dialog").dialog({ modal: true, height: (parseInt(obj.attr("h"))+200) , width: (parseInt(obj.attr("w"))+300)  , title:displayTitle });
				}else{
					$("#dialog").html("Load Failed");
					$("#dialog").dialog({ modal: true , title:"Failed"});
				}
				 
			});
	}

	$(".itemTitle").live("click", function() {
		$("#myType").val("TITLE");
		$("#myKeywords").val($(this).text());
		searchResult();
	});
	
	$(".itemAuthor").live("click", function() {
		$("#myType").val("AUTHOR");
		$("#myKeywords").val($(this).text());
		searchResult();
	});
	
	function searchResult() {
		clearResult();
		$("#keywords").val($("#myKeywords").val());
		$("#type").val($("#myType").val());
		$.ajax({
			type: "POST",
			url: "items.jsp",
			cache: false,
			data: {t: $("#type").val(), w: $("#keywords").val()},
			dataType: "html",
			success: function(html){
				$("#results").append(html); 
				$("#totalsearchresults").text($("#resultheader").text());
				$("#resultheader").remove();
				$("#btnClear").show();
				$("#btnMore").hide();
				if ($("#totalsearchresults").text().indexOf("of") > 0) {$("#btnMore").show();}
				highlightResult();
			}
		});	

		
	}
	
	function clearResult() {
		$("#itempage").val("1");
		$("#results").html(""); 
		$("#btnMore").hide();
		$("#btnClear").hide();
		$("#totalsearchresults").text("");
		$("#resultfooter").remove();
	}
	
	function nextResult() {
		$("#resultfooter").remove();
		$("#itempage").val(Number($("#itempage").val()) + 1); 
		$.ajax({
			type: "POST",
			url: "items.jsp",
			cache: false,
			data: {t: $("#type").val(), w: $("#keywords").val(), p:$("#itempage").val()},
			dataType: "html",
			success: function(html){
				$("#results").append(html); 
				$("#totalsearchresults").text($("#resultheader").text());
				$("#resultheader").remove();
				$("#btnMore").hide();
				if ($("#totalsearchresults").text().indexOf("of") > 0) {$("#btnMore").show();}
				$("#btnClear").show();
				highlightResult();
				scrollBottom();
			}
		});	
	}
	
	function highlightResult() {
		$('#results').removeHighlight();
		var k = $("#keywords").val();
		var ks = k.split(" ");
		for(var i=0;i<ks.length;i++) {
			if (ks[i].length > 2) {
				$('#results').highlight(ks[i]);
			}
		}
	}
	
	function scrollBottom() {
		$('#results').scrollTop($(".resultItem").size()*100);
	}
	
	// Update Total Results
	if($("#myKeywords").val() != "") {
		$("#totalsearchresults").text($("#resultheader").text());
		$("#btnClear").show();
		$("#resultheader").remove();
		highlightResult();
	}
	else {
		clearResult();
	}
	
	
	
});

</script>
<% 
%> 
</head>
<body>
<html:form styleId="myForm" action="/search" >
	<html:hidden property="exchangeRate" styleId="exchangeRate" />
	<html:hidden property="currency" styleId="currency" />
	<input id="itempage" type="hidden" value="1" />
	<input id="keywords" type="hidden" value="<%=keywords %>" />
	<input id="type" type="hidden" value="KEYWORDS" />
	<table>
		<tr>
			<td align="right">
				<bean:message key="label.search.name" />:
			</td>
			<td>
				<input id="myKeywords" type="text" size="100" value="<%=keywords %>" />
			</td>
			<td align="right">
				<select id="myType" name="t">
					<option value="KEYWORDS">Keywords</option>
					<option value="TITLE">Title</option>
					<option value="AUTHOR">Author</option>
				</select>
			</td>
			<td>
				<input id="btnSearch" type="button" value="Search"></input>
				
			</td>
			<td>
				&nbsp; <a id="btnClear" href="javascript:void(0)">[clear]</a> &nbsp;
				<span id="totalsearchresults" ></span> 			
			</td>
		</tr>
	</table>
<br/>


<jsp:include page="layout/result-header.html" />
<div id="results" style="width:100%; height: 500px; display:block; overflow-y:auto; ">
<jsp:include page="items.jsp" />
</div>
<jsp:include page="layout/result-footer.html" />
<a id="btnMore" href="javascript:void(0)">[more]</a>
<br/>
<jsp:include page="layout/footer.html" />
<div id="dialog" title="dialog"></div>
</html:form>
</body>
</html>
